<template>
  <div>
    <button @click="goToWechatLogin">h5微信登录</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

// 微信公众号的 appid
const appid = 'your_appid'
// 授权回调域名
const redirectUri = encodeURIComponent('your_redirect_uri')
// 授权作用域
const scope = 'snsapi_userinfo'
// 自定义的状态参数
const state = 'STATE'

// 跳转到微信授权页面
const goToWechatLogin = () => {
  const wechatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
  window.location.href = wechatAuthUrl
}

onMounted(() => {
  // 获取 URL 中的 code 参数
  const urlParams = new URLSearchParams(window.location.search)
  const code = urlParams.get('code')
  if (code) {
    // 将 code 发送到后端换取 access_token 和用户信息
    // 这里需要调用后端接口
    // fetch('/api/wechat-login', {
    //   method: 'POST',
    //   headers: {
    //     'Content-Type': 'application/json',
    //   },
    //   body: JSON.stringify({ code }),
    // })
    // .then(response => response.json())
    // .then(data => {
    //   // 处理用户信息
    //   console.log('用户信息:', data);
    // });
  }
})
</script>

<style scoped></style>
